<template>
  <div class="box">
    <div class="crumbs">
      您现在的位置：
      <Breadcrumb :breadcrumbList="crumbsList"></Breadcrumb>
    </div>
    <div class="article_list">
      <div v-for="item in articleList" :key="item.id" class="article_item">
        <div class="time">({{ item.unDate }})</div>
        <div class="dividing_line">/</div>
        <div class="title" @click="toDetail(item)">{{ item.title }}</div>
      </div>
      <el-empty v-if="!articleList.length" description="暂无数据"></el-empty>
      <div class="paging">
        <el-pagination
          v-if="articleList.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="articleQuery.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="articleQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="articleTotal"
        >
        </el-pagination>
      </div>
    </div>
    <!-- <detail
      v-else-if="articleTotal === 1"
      :detailData="detailData"
      :isCrumbs="false"
    ></detail> -->
  </div>
</template>

<script>
import detail from "@/views/detail";
export default {
  props: {
    crumbsList: {
      type: Array,
    },
    articleList: {
      type: Array,
      default: [],
    },
    articleQuery: {
      type: Object,
    },
    articleTotal: {
      type: Number,
      default: 0,
    },
  },
  components: { detail },
  data() {
    return {
      detailData: {},
      currentPage4: 1,
    };
  },
  watch: {
    articleList: {
      handler(newVal, oldVal) {
        console.log("watch", newVal);
        if (newVal.length > 0) {
          this.detailData = newVal[0];
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleSizeChange(val) {
      this.articleQuery.limit = val;
      this.$emit("randomArticle", this.articleQuery);
    },
    handleCurrentChange(val) {
      this.articleQuery.page = val;
      this.$emit("randomArticle", this.articleQuery);
    },
    toDetail(item) {
      if (this.crumbsList[this.crumbsList.length - 1].path) {
        this.crumbsList.push({
          name: item.title,
        });
      } else {
        this.crumbsList[this.crumbsList.length - 1].name = item.title;
      }
      sessionStorage.setItem("crumbsList", JSON.stringify(this.crumbsList));
      this.$router.push({
        path: "/detail",
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
}
.crumbs {
  padding: 0 10px;
  width: 100%;
  height: 48px;
  display: flex;
  font-size: 15px;
  align-items: center;
  color: #fff;
  background-color: #af251b;
}
.article_list {
  position: relative;
  // min-height: calc(100vh - 600px);
  padding-bottom: 40px;
  .article_item {
    margin: 0 10px;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    font-size: 14px;
    .dividing_line {
      margin: 0 10px;
    }
    .title {
      cursor: pointer;
      color: #363535;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .paging {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    ::v-deep .el-pager li.active {
      color: #af251b;
    }
  }
}
</style>